<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库 TeleDB for MemDB</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          云原生数据库 TeleDB for
          MemDB，版本兼容MemCache与Redis协议标准，提供混合存储的数据库服务，基于双机热备架构及集群架构，可满足高吞吐、低延迟及弹性变配等业务需求，用于减轻数据库负载，可有效加快应用速度、提高并发能力、提升应用的可扩展性。以简单易用、高可靠性、可扩展性为设计理念，助力企业和组织对业务应用加速和高读写性能的诉求，保障业务系统高速稳定运行。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.name"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <p>{{ item.label }}</p>
            <div class="img-box bor" v-if="item.imgUrl">
              <img :src="item.imgUrl" alt="" />
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="section-title mt-10">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav6',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '高可用',
          label:
            '全系列支持同城双机房高可用，可用性99.95%。中心化管理模块避免网络不稳定下的脑裂问题。'
        },
        {
          name: '部署配置简单',
          label:
            '即开即用，提供图形化的管理控制台，便于统一维护，轻松应对集群部署和管理。支持原生Memcached和Redis协议，兼容更多的开源类型客户端。'
        },
        {
          name: '低成本',
          label: '安装便捷、部署等运维投入，按需购买，节约成本。'
        },
        {
          name: '架构丰富',
          label:
            '支持单机版、主备版、集群版、自动读写分离版，集群版可支持TB级别的缓存。读写分离支持多副本只读分离，支持按需架构切换。'
        },
        {
          name: '日志系统完善',
          label: '慢日志方便性能问题定位，审计日志提供操作记录。'
        },
        {
          name: '备份还原系统',
          label: '提供增量备份能力，支持灵活的备份策略。'
        },
        { name: '存储能力', label: '提供持久存储能力，命令级持久化数据。' }
      ],
      tabList: [
        {
          title: '场景1',
          name: '0',
          imgUrl: require('../../assets/images/pic/img-6-1.png'),
          label:
            '1.纯缓存场景：可以应用于会话缓存、业务缓存、热点数据缓存 等场景，提升数据读写性能。'
        },
        {
          title: '场景2',
          name: '1',
          imgUrl: require('../../assets/images/pic/img-6-2.png'),
          label:
            '2.大型B2B、B2C交易系统，促销活动使系统访问压力非常大，一般的数据库根本无法承载这样的读取压力，可选用分布式缓存Memcache存储。'
        },
        {
          title: '场景3',
          name: '2',
          imgUrl: '',
          label:
            '3、排行榜业务场景：对于排序业务场景可以使用Redis有序集合实现 快速排序，降低业务复杂度，提升效率。'
        },
        {
          title: '场景4',
          name: '3',
          imgUrl: '',
          label:
            '4、排行榜业务场景：利用Redis PUB/SUB或者Stream功能可以轻松 实现实时通信，消息分发等功能，满足高并发的 社交通信、异步任务流等业务场景。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-6.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
